<template>
  <div class="wrapper">
    <commonHeader></commonHeader>
    <commonAside></commonAside>
    <section id="content">
      <div class="inner-wrapper">
        <nav id="page-nav">
          <ul class="clear-fix">
            <router-link tag="li" to="/sfx/sfx_show">
              <a><i class="icon-show"></i>SHOW</a>
            </router-link>
            <router-link tag="li" to="/sfx/sfx_manage">
              <a><i class="icon-manage"></i>MANAGE</a>
            </router-link>
            <router-link tag="li" to="/sfx/sfx_assign">
              <a><i class="icon-assign"></i>ASSIGN</a>
            </router-link>
            <router-link tag="li" to="/sfx/sfx_extent">
              <a><i class="icon-extents"></i>EXTENTS</a>
            </router-link>
            <router-link tag="li" to="/sfx/sfx_create">
              <a><i class="icon-create"></i>CREATE</a>
            </router-link>
            <router-link tag="li" to="/sfx/sfx_delete">
              <a><i class="icon-delete"></i>DELETE</a>
            </router-link>
            <router-link tag="li" to="/sfx/sfx_prefetch">
              <a><i class="icon-prefetch"></i>PREFETCH</a>
            </router-link>
          </ul>
        </nav>
        <div class="main-content">
          <router-view></router-view>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
  import commonHeader from './../../components/header/header.vue'
  import commonAside from './../../components/aside/aside.vue'
  export default {
    name: 'ctrl',
    components: {
      commonHeader,
      commonAside
    },
    data () {
      return {
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped rel="stylesheet/scss">
  body{
    background: #ffffff;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    &:first-child {
      margin-top: 10px;
    }
  }
  .el-form {
    width: 600px;
  }
</style>
